<!--用户管理页-->
<template>
  <div style="height:6vh;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">用户管理</span>
    <el-button type="primary" @click="saveDialogTitle"
               style="float:right;margin-top:10px;">新建用户</el-button>
  </div>
  <!-- 新建用户弹窗 -->
  <el-dialog
      :title="dialogTitle"
      v-model="dialogVisible"
      style="width: 1000px;padding: 40px;"
      :before-close="handleClose">

    <el-form label-position="top">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="userSaveForm.username"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="密码">
            <el-input placeholder="请输入密码" v-model="userSaveForm.password" show-password></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="邮箱地址" >
            <el-input placeholder="请输入邮箱" v-model="userSaveForm.email"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号">
            <el-input placeholder="请输入手机号" v-model="userSaveForm.phone"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="职位">
            <el-select placeholder="请选择" v-model="userSaveForm.level" @change="loadLeader">
              <el-option v-for="item in levelList" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上级领导">
            <el-select placeholder="请选择" v-model="userSaveForm.parentId" :disabled="userSaveForm.level==40">
              <el-option v-for="item in leader" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <!--
        <el-col :span="12">
          <el-form-item label="部门">
            <el-select placeholder="请选择" v-model="userSaveForm.deptId">
              <el-option v-for="item in deptList" :label="item.name" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" v-model="userSaveForm.age"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="性别" >
                <!--            <el-select placeholder="请选择" v-model="userSaveForm.gender">
              <el-option label="男" value="1"></el-option>
              <el-option label="女" value="0"></el-option>
            </el-select>-->
            <el-radio-group v-model="userSaveForm.gender">
              <el-radio border label="男" value="1" style="margin: 0;width: 100px"></el-radio>
              <el-radio border label="女" value="0" style="width: 100px"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="账号状态">
            <!--            <el-select placeholder="请选择" v-model="userSaveForm.status">
              <el-option label="正常" value=100></el-option>
              <el-option label="停用" value=110></el-option>
            </el-select>-->
            <el-radio-group v-model="userSaveForm.status" >
              <el-radio border label="正常" :value=1 style="margin: 0;width: 100px"></el-radio>
              <el-radio border label="停用" :value=0 style="width: 100px"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary"
                 @click="saveUser">保存</el-button>
    </template>
  </el-dialog>
  <!--用户搜索卡片-->
  <el-card style="margin: 20px 20px 0 20px;height: 80px;line-height: 55px">
    <el-form :inline="true">
      <el-form-item label="用户名" style="width: 240px;">
        <el-input placeholder="请输入用户名" v-model="searchUserForm.username"></el-input>
      </el-form-item>
      <el-form-item label="部门名称" style="width: 240px;">
        <el-input placeholder="请输入部门名称" v-model="searchUserForm.deptName"></el-input>
      </el-form-item>
      <el-form-item label="账号状态" style="width: 200px;">
        <el-select placeholder="请选择" v-model="searchUserForm.status" @change="loadUser" >
          <el-option label="正常" value=1></el-option>
          <el-option label="停用" value=0></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadUser">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 用户列表 -->
  <el-card style="margin:20px;">
    <el-table :data="UserTableDate">
      <el-table-column type="index" label="编号" width="80" align="center"/>
      <el-table-column prop="username" label="用户名"  align="center"/>
      <el-table-column prop="email" label="邮箱地址"  align="center"/>
      <el-table-column prop="phone" label="手机号"  align="center"/>
<!--      <el-table-column prop="gender" label="性别"  align="center"
                       :formatter="genderFormatter"/>-->
      <el-table-column prop="deptId" label="部门" align="center" :formatter="deptFormatter"/>
      <el-table-column prop="level" label="职位" align="center" :formatter="levelFormatter"/>
      <el-table-column prop="parentName" label="上级领导" align="center" />
      <el-table-column prop="status" label="账号状态"  align="center"
                       :formatter="accountFormatter"/>
      <el-table-column prop="createTime" label="入职时间" align="center"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="editUser(scope.row.id)">编辑用户</el-button>
          <el-button link type="primary" size="small" @click="resetPwd(scope.row.id)">重置密码</el-button>
          <el-button link type="primary" size="small" @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import api from "@/util/request";
import {ElMessage} from "element-plus";

const dialogTitle = ref('新建用户');
const dialogVisible = ref(false);
//网关
const gateway = '/system_api';

//搜索
const searchUserForm = ref({
  username:'',
  deptName:'',
  status:''
});
const UserTableDate = ref([]);

//用户列表展示
const loadUser = () => {
  let data = qs.stringify(searchUserForm.value);
  api.get(gateway+"/oa/user/select?"+data).then((response)=>{
      UserTableDate.value = response.data.data;
  })
}
onMounted(()=>{
  loadUser();
})

//重置搜索条件
const resetSearch = () => {
  searchUserForm.value = {
    username:'',
    deptName:'',
    status:''
  }
  loadUser();
}

//新增用户表单职级数组
const levelList = ref([
  {value:'10',name:'职员'},
  {value:'20',name:'主管'},
  {value:'30',name:'经理'},
  {value:'40',name:'总监'}
]);

//新增用户表单部门数组
const deptList = ref([
  {value:'101',name:'财务部'},
  {value:'102',name:'技术部'},
  {value:'103',name:'研发部'},
  {value:'104',name:'客服部'},
  {value:'105',name:'法务部'}
]);

//定义数组保存上级领导领导名与id
const leader = ref([{id:'',username:''}]);

//通过职级获取上级领导
const loadLeader = () => {
  if(userSaveForm.value.level == '40'){
    leader.value = {};
    userSaveForm.value.parentId = '';
    return;
  }
  leader.value = {};
  userSaveForm.value.parentId = '';
  let level = parseInt(userSaveForm.value.level)+10;
  api.get(gateway+"/oa/user/select?level="+level).then((response)=>{
    leader.value = response.data.data;
  })
}

//新增用户弹窗
const saveDialogTitle = () => {
  dialogTitle.value = "新建用户";
  userSaveForm.value = {};
  dialogVisible.value = true;
}

//保存新增用户数据
const userSaveForm = ref({
  username:'',
  password:'',
  email:'',
  phone:'',
  level:'',
  age:'',
  parentId:'',
  gender:'',
  status:''
});

//保存用户方法
const saveUser = () => {
  let data = qs.stringify(userSaveForm.value);
  console.log(data);
  api.post(gateway+"/oa/user/save",data).then((response)=>{
    ElMessage.success("保存成功!");
    dialogVisible.value = false;
    userSaveForm.value = {};
    loadUser();
  })
}

//关闭新增用户弹窗
const handleClose = () => {
  if(confirm("确认关闭此弹窗吗?")){
    dialogVisible.value = false;
    userSaveForm.value = {};
  }
}

//修改用户信息
const editUser = (id) => {
  dialogTitle.value = "修改用户";
  dialogVisible.value = true;
  api.get(gateway+"/oa/user/select?id="+id).then((response)=>{
    userSaveForm.value = response.data.data[0];
    console.log(response.data.data);
    console.log(userSaveForm.value);
    //拿到当前用户选择的职级
    let level = parseInt(userSaveForm.value.level)+10;
    //给后端发送请求,获取直属领导数据
    api.get(gateway+"/oa/user/select?level="+level).then((response)=>{
      leader.value = response.data.data;
    })
  })
}

//重置密码
const resetPwd = (userId) => {
  if(confirm("确认重置密码吗?")){
    api.post(gateway+"/oa/user/reset/"+userId).then((response)=>{
      ElMessage.success("重置密码成功!");
    })
  }
}

//删除用户
const deleteUser = (userId) => {
  if(confirm("确认删除该用户吗?")){
    api.post(gateway+"/oa/user/delete/"+userId).then((response)=>{
      ElMessage.success("删除成功!");
      loadUser();
    })
  }
}

//内容显示转换(性别)
/*const genderFormatter = (row,column,cellValue,index) => {
  if(cellValue == 1){
    cellValue = '男';
  }else if(cellValue == 0){
    cellValue = '女';
  }
  return cellValue;
}*/

//内容显示转换(状态)
const accountFormatter = (row,column,cellValue,index) => {
  if(cellValue == 1){
    cellValue = '正常';
  }else if(cellValue == 0){
    cellValue = '停用';
  }
  return cellValue;
}

//内容显示转换(部门)
const deptFormatter = (row,column,cellValue,index) => {
  if(cellValue == 101){
    cellValue = '财务部';
  }else if(cellValue == 102){
    cellValue = '技术部';
  }else if(cellValue == 103){
    cellValue = '研发部';
  }else if(cellValue == 104){
    cellValue = '客服部';
  }else if(cellValue == 105){
    cellValue = '法务部';
  }
  return cellValue;
}

//内容显示转换(职级)
const levelFormatter = (row,column,cellValue,index) => {
  if(cellValue == 10){
    cellValue = '职员';
  }else if(cellValue == 20){
    cellValue = '部门主管';
  }else if(cellValue == 30){
    cellValue = '经理';
  }else if(cellValue == 40){
    cellValue = '总监';
  }
  return cellValue;
}
</script>

<style scoped>

</style>